<!--播报组件-->
<template>
  <span class="head-btn-button" slot="btn" v-if="detail.newsContent.channelId ==='5'"  ></span>
  <span class="head-btn-button" slot="btn" v-else-if="tools.NotIsNull(detail.newsContent.ttsOssUrl) && !getIsBroadcast(detail.newsContent.id)" @click="showAudio(detail.newsContent)" ><i class="icon-horn-write"></i></span>
  <span class="head-btn-button" slot="btn" v-else-if="tools.NotIsNull(detail.newsContent.ttsOssUrl) && getIsBroadcast(detail.newsContent.id)" @click="pause()"><i class="icon-pause-write"></i></span>
</template>

<script>
  export default {
    name: 'broadcastComponent',
    props: ['detail'],
    data () {
      return {
      }
    },
    methods: {
      /*播报相关*/
      showAudio(item){//开始播报
        let url = item.ttsOssUrl
        // let title = item.title.replace(/<span([^<>]*)>(.*?)<\/span>/gi, '$2')
        window.audioPlayer.playBroadcast(item.title,url,item.id,true)
      },
      getIsBroadcast(id){ //获取当前的id是否是播放状态
        return (this.$store.state.PLAY_BROADCAST && this.$store.state.PLAY_BROADCAST === id)
      },
      pause(){//暂停播报
        this.$store.commit("setPLAY_BROADCAST",'pause_'+this.$store.state.PLAY_BROADCAST);
        window.audioPlayer.pause()
      },
      /*播报相关结束*/
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
</style>
